<template>
  <div>
    <a-modal title="物流跟踪事件" :visible="visible" :footer="false" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <div>
        <a-row>
          <a-col :span="12" style="margin-bottom: 5px">
            <div style="display: flex">
              <div>物流商：</div>
              <div>{{ $extract(detailInfo, 'expressProviderName') || '--' }}</div>
            </div>
          </a-col>
          <a-col :span="12" style="margin-bottom: 5px">
            <div style="display: flex">
              <div>承运商：</div>
              <div>{{ $extract(detailInfo, 'carrier') || '--' }}</div>
            </div>
          </a-col>
          <a-col :span="12" style="margin-bottom: 5px">
            <div style="display: flex">
              <div>运单号：</div>
              <div>33333333333</div>
            </div>
          </a-col>
          <a-col :span="12" style="margin-bottom: 5px">
            <div style="display: flex">
              <div>跟踪号：</div>
              <div>{{ $extract(detailInfo, 'trackingNumber') || '--' }}</div>
            </div>
          </a-col>
          <a-col :span="24">
            <div style="display: flex">
              <div>发货时间：</div>
              <div>{{ $setTime(detailInfo.gmtShip) }}</div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="mt10">
        <a-collapse :default-active-key="[1, 2]">
          <a-collapse-item header="八月 17号" key="1">
            <div class="address-item clearfix">
              <div class="time fl">05:57</div>
              <div class="info-text fl">111111111111111111111111111111111</div>
              <div class="address fl">测试地址测试地址</div>
            </div>
          </a-collapse-item>
        </a-collapse>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getPackageById } from '@/api/order'
  export default defineComponent({
    props: ['id'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data = reactive({
        loading: false,
        detailInfo: {},
      })

      const open = () => {
        getPackageDetail()
      }
      const handleOk = () => {}
      const handleCancel = () => {
        visible.value = false
      }
      const getPackageDetail = async () => {
        console.log(props)

        const res = await getPackageById({ id: props.id })
        data.detailInfo = res?.data || {}
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
      }
    },
  })
</script>

<style lang="less" scoped>
  .address-item {
    height: 40px;
    // line-height: 40px;
    font-size: 12px;
    .time {
      width: 40px;
      line-height: 40px;
    }

    .info-text {
      width: 300px;
      line-height: 40px;
    }

    .address {
      width: 100px;
      line-height: 40px;
    }
  }
</style>
